<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>四川省</title>
  <script src="./asset/echarts/echarts.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 准备一个容器，放置图表 -->
<div id="demo" style="width: 1000px;height: 600px;" class="container text-center">

</div>

<!-- 使用js绘制图表 -->
<script>
  //初始化
  var myChart = echarts.init(document.querySelector('#demo'))

  //指定图表的配置
  // This example requires ECharts v5.5.0 or later
  option = {
    xAxis: {
      data: ['orange']
    },
    yAxis: {},
    dataGroupId: '',
    animationDurationUpdate: 500,
    series: {
      type: 'bar',
      id: 'sales',
      data: [
        {
          value: 5,
          groupId: 'animals'
        },
        {
          value: 2,
          groupId: 'fruits'
        },
        {
          value: 4,
          groupId: 'cars'
        }
      ],
      universalTransition: {
        enabled: true,
        divideShape: 'clone'
      }
    }
  };
  const drilldownData = [
    {
      dataGroupId: 'animals',
      data: [
        ['柑橘种植技术', 4],
        ['病虫害防治', 2],
        ['柑橘品种', 1],
        ['柑橘百科', 2],
        ['视频', 1]
      ]
    }
  ];
  myChart.on('click', function (event) {
    if (event.data) {
      var subData = drilldownData.find(function (data) {
        return data.dataGroupId === event.data.groupId;
      });
      if (!subData) {
        return;
      }
      myChart.setOption({
        xAxis: {
          data: subData.data.map(function (item) {
            return item[0];
          })
        },
        series: {
          type: 'bar',
          id: 'sales',
          dataGroupId: subData.dataGroupId,
          data: subData.data.map(function (item) {
            return item[1];
          }),
          universalTransition: {
            enabled: true,
            divideShape: 'clone'
          }
        },
        graphic: [
          {
            type: 'text',
            left: 50,
            top: 20,
            style: {
              text: 'Back',
              fontSize: 18
            },
            onclick: function () {
              myChart.setOption(option);
            }
          }
        ]
      });
    }
  });
  myChart.setOption(option)

</script>
<link rel="stylesheet" href="./asset/bootstrap@5.3.0/css/bootstrap.min.css">
</body>
</html>
